<template>
  <div class="app-main-container" style="padding-top: 10px;">
    <el-tabs v-model="activeIndex" @tab-click="tabChange">
      <el-tab-pane :label="$t('message.dcdd')" name="first" />
      <el-tab-pane v-if="meta.indexOf('AboutBallList') > -1" :label="$t('message.yqddlb')" name="two" />
      <el-tab-pane v-if="meta.indexOf('SiteLockList') > -1" :label="$t('message.plsclb')" name="three" />
    </el-tabs>
    <orderList v-show="activeIndex === 'first'" ref="orderList" />
    <aboutBallList v-show="activeIndex === 'two'" ref="aboutBallList" />
    <lockList v-show="activeIndex === 'three'" ref="lockList" />
  </div>
</template>

<script>
import orderList from './components/orderList.vue'
import aboutBallList from './components/aboutBallList.vue'
import lockList from './components/lockList.vue'
export default {
  name: 'OrderList',
  components: {
    orderList, aboutBallList, lockList
  },
  data () {
    return {
      activeIndex: 'first',
      meta: []
    }
  },
  mounted () {
    this.meta = this.$route.meta.buttons || []
    this.$refs.orderList.getSiteList(1)
    // if (this.meta.indexOf('OrderList') > -1) {
    //   this.$refs.orderList.getSiteList(1)
    // } else if (this.meta.indexOf('AboutBallList') > -1) {
    //   this.activeIndex = 'two'
    //   this.$refs.aboutBallList.getList(1)
    // } else if (this.meta.indexOf('SiteLockList') > -1) {
    //   this.activeIndex = 'three'
    //   this.$refs.lockList.getList(1)
    // }
  },
  methods: {
    tabChange (tab) {
      this.activeIndex = tab.name
      if (this.activeIndex === 'first') {
        this.$refs.orderList.getSiteList(1)
      } else if (this.activeIndex === 'two') {
        this.$refs.aboutBallList.getList(1)
      } else if (this.activeIndex === 'three') {
        this.$refs.lockList.getList(1)
      }
    }
  }
}
</script>
